{% extends "baseUser.html" %}

{% block userData %}
	<div class="page-header">
		<div class="row">
			<div class="col-md-10">
				<h1>Mis Actividades</h1>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
			{% with messages = get_flashed_messages() %}
			  {% if messages %}
			    <div class="alert alert-info">
			    {% for message in messages %}
			      {{ message }}
			    {% endfor %}
			    </div>
			  {% endif %}
			{% endwith %}		
		</div>
		<div>
			<table class="table table-striped">
				<thead align="center" style="font-weight:bold;">
					<tr>
						<td>#</td>
						<td>Deporte</td>
						<td>Distancia (km)</td>
						<td>Duración (min)</td>
						<td>Fecha</td>
						<td>Mapa</td>
					</tr>
				</thead>
				<tbody align="center">
				{% for activ in activ_del_usuario %}
					<tr>
						<td>{{ activ.id }}</td>
						<td>{{ get_deporte(activ.deporte_id) }}</td>
						<td>{{ (activ.distancia|string).replace(".",",") }}</td>
						<td>{{ (activ.duracion|string).replace(".",",") }}</td>
						<td>{{ activ.fecha.strftime('%d-%m-%Y') }}</td>
						{% if get_tracking(activ.id) %}
							<td><a href="#" data-toggle="modal" data-target="#myModal">Mapa</a></td>
						{% endif %}
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	</div>	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h4 class="modal-title" id="myModalLabel">Mapa</h4>
	      </div>
	      <div class="modal-body" style="height:400px;">
				<iframe src="/static/mobileTracker/viewer/viewer.html" style="width:100%; height:100%;"></iframe>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Ocultar</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
{% endblock %}